<script lang="ts" setup>
	import { onMounted, ref } from 'vue'


	const emit = defineEmits(['checkVersion', 'handleEnd'])
	

	onMounted(() => {

	})

	

	const checkVersion = () => {

		emit('checkVersion')
	}
	
	const handleEnd = () => {
		emit('handleEnd')
	}
</script>

<template>
	<view @touchend="handleEnd" style="margin-top: 10%;">

		<view class=" flex">
			<view class="big-item-box bg-d671d1-c13ec1 click-scale"
				style="width: 28%;height: 250px;border-radius: 15px;" @click="checkVersion">
				<view class="flex-center">
					<img class="item-icon " :src="'@/../static/img/home/homeAppoint.svg'" />
				</view>
				<view class="item-content mt20">
					安装最新版本
				</view>
			</view>
		</view>
		<view class="mt20 flex-around">


		</view>

	</view>
</template>

<style>
	.big-item-box {
		display: flex;
		/* width: 516.667px; */
		/* height: 350px; */
		padding: 0px 30px;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.time-box {
		display: flex;
		width: 25px;
		height: 30px;
		padding: 6px 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 5px;
		background: #006EE3;
		font-size: 28px;
		color: white;

	}

	.time-text {
		color: #FFF;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		color: #FFF;
		text-align: center;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-family: PingFang HK;
		font-size: 26px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.time-colon {
		color: #024FA0;
		text-align: center;
		font-family: PingFang HK;
		font-size: 28px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		margin: 0 10px;

	}

	.item-icon {
		width: 80%;
		height: 100%;
		flex-shrink: 0;

	}

	.item-content {
		color: #FFF;
		text-align: center;
		text-shadow: 0px 3.6px 3.6px rgba(0, 0, 0, 0.25);
		font-family: PingFang HK;
		font-size: 36px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.calendar-outBox {
		transition: 0.5s;
		transition-timing-function: ease;

	}

	.show {
		opacity: 1;
	}

	.hide {
		opacity: 0;
		pointer-events: none;
		/* 使隐藏元素不响应点击事件 */
	}

	.bg-d671d1-c13ec1 {

		background: linear-gradient(239deg, #d671d1 17.23%, #c13ec1 99.93%), #FAFAFA;
	}

	.fontPage {
		visibility: visible;
		transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
		opacity: 1;
		z-index: 9999;
	}

	.opacity0 {
		/* animation: hidden 1s ease-in-out; */
		opacity: 0;
		visibility: hidden;
		z-index: 1;
	}
</style>